<template>
	<view class="wrap">
    <view class="search-box">
      <view class="u-flex search">
        <u-icon size="40" name="search" style="margin-left: 20rpx;" color="#979797"></u-icon>
        <input type="text" v-model="keywords" confirm-type="搜索" placeholder="搜索房源" @confirm="getList(1)" class="keywords">
      </view>
    </view>
    <view v-for="(item, index) in list" :key="index"  class="list">
      <view class="item u-flex u-col-center u-row-bettwen">
        <view class="u-flex u-col-center u-row-bettwen u-flex-1" @click="link(1, item.house_sn)">
          <u-image :showLoading="true" :src="http+item.picList[0].image" width="198rpx" height="180rpx"></u-image>
          <view class="div u-flex-1">
            <view class="name u-line-2 u-m-b-10">{{item.house_title}}</view>
            <!-- <view class="u-tips-color u-line-2 u-m-b-10"></view> -->
            <rich-text class="u-tips-color u-line-2 u-m-b-10" :nodes="item.content"></rich-text>
            <view class="u-type-primary" v-if="item.status == 1">已维修</view>
            <view class="u-type-error" v-else>已上报维修，请耐心等待</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
  .wrap{background-color: #fff; padding-top: 150rpx;}
  .pup{
    .shaixuan{
      box-shadow: 0 1px 4px #ededed; position: relative; z-index: 5;
      .item.on{color: #2A70F9;}
    }
    .prcie-box{
      padding: 30rpx;
      .item{
        display: flex; align-items: center; height: 82rpx; color: #666; font-size: 30rpx;
        &.on{color: #2A70F9;}
      }
    }
    .area-box{
      align-items: stretch;
      .left{
        width: 180rpx; background-color: #F5F7FB;
        .item{
          height: 82rpx; position: relative; padding-left: 30rpx; color: #666; font-size: 30rpx;
          &.on{
            color: #2A70F9; background-color: #fff;
            &::after{content: ''; display: block; width: 4rpx; background-color: #2A70F9; height: 52rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
          }
        }
      }
      .right{
        width: 100%; flex: 1; background-color: #fff;
        .item{
          height: 82rpx; display: flex; align-items: center; padding: 0 20rpx;color: #666; font-size: 30rpx;
          &.on{color: #151515;}
        }
      }
      .right,.left{max-height: calc(100vh - 300rpx); overflow-y: auto;}
    }
  }
  .list{
    .item{
      padding: 30rpx; margin-bottom: 30rpx; border-bottom: 1px solid #ededed; padding-top: 0;
      .name{font-size: 30rpx; margin-bottom: 14rpx; color: #3C3D3E;}
      .lab{color: #3C3D3E; margin-bottom: 20rpx;}
      .price1{color: #2A70F9; font-size: 30rpx;}
      .div{margin-left: 20rpx;}
    }
  }
  .ban{position: relative; z-index: 1;}
  .search-box{
    padding:20rpx 30rpx; position: relative; z-index: 4; border-radius: 10rpx 10rpx 0 0; background-color: #fff; width: 100%; position: fixed; left: 0; box-shadow: 0 0 10rpx #dddddd; top: 0;
  }
  .search{
    background-color: #F3F2F7; border-radius: 40rpx;
    height: 80rpx; background-color: #F3F2F7;
    .keywords{flex: 1; width: 100%;}
  }
  .shaixuan{
    padding: 0 30rpx; background-color: #fff;
    .item{height: 94rpx;}
  }
</style>
<script>
	export default {
		data() {
			return {
        keywords:'', // 搜索条件
        list: [
          
        ],
        page:1,
        http:'',
        total:-1
			}
		},
    onShow(){
      this.list = []
      this.getList(0);
      this.http = this.$api.httpUrlApi();
    },
    watch: {
      
    },
    
		methods: {
      // 获取列表
      getList(type = 0){
        uni.showLoading()
        if(type == 1){
          this.page = 1;
          this.list = [];
        }
        if(this.total === this.list.length) return
        this.$api.myRepairReportListApi({
          page:this.page,
          keyWord: this.keywords,
        }).then(res=>{
          uni.hideLoading()
          if(res.code === 1){
            this.total = res.data.total
            this.list = this.list.concat(res.data.data);
            if(this.list.length < res.data.total){
              this.page++
            }
          }
        })
      },
		},
    onShareAppMessage() {
      // return {
      //   title: '',
      //   path: '/pages/index/index',
      // }
    },
    onReachBottom() {
      if(this.page > 1){
        this.getList()
      }
    }
	}
</script>